<template>
	<view class="ui-fixed">
		<view v-if="btnShow" class="flex-btn" :style="{background: backGround}">
			<button class="btn" @tap="separateTo" :style="{background: backGround}">{{btnText}}</button>
		</view>
		<view v-else class="tui-flex">
			<view class="ui-left">
				{{title}}
				<text class="ui-total">￥{{amount}}</text>
			</view>
			<view class="ui-right" @tap="imPayment">
				<text>{{payText}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: '需支付'
			},
			amount: {
                type: Number,
                default: 0
			},
			payText: {
                type: String,
                default: '立即支付'
			},
			btnShow: {
				type: Boolean,
                default: false
			},
            btnText: {
                type: String,
                default: '取消'
            },
            backGround:{
                type: String,
                default: '#6CB041'
            }
		},
		data() {
			return {
			}
		},
		methods: {
            imPayment() {
                this.$emit('imPayment')
            },
            separateTo() {
                this.$emit('separateTo')
            }
		}
	}
</script>
<style lang="scss">
	.ui-fixed {
		position: fixed;
		width: 100%;
		background: #fff;
		bottom: 0;
		.ui-left {
			width: 60%;
			padding: 20rpx;
			font-size: 32rpx;
			.ui-total {
				color: red;
				padding-left: 15rpx;
			}
		}
		.ui-right {
			background: $uni-color-success;
			padding: 20rpx;
			width: 40%;
			color: #fff;
			text-align: center;
			font-size: 34rpx;
		}
		.flex-btn {
			.btn {
				/*background: $uni-color-success;*/
				color: #fff;
				border-radius: 0;
			}
		}
	}
</style>